<script>
import {getCartItemCount, updateCart} from "@/utils/Cart";

export default {
  name: "Head",
  data() {
    return {
      user : null,
      cartCount : 0
    };
  },
  created() {
    this.getUserInfo();
    this.$bus.$on('user-change', this.getUserInfo);
    this.$bus.$on('cart-change', this.updateCartCount);
    this.updateCartCount();
  },
  beforeDestroy() {
    this.$bus.$off('user-change', this.getUserInfo);
    this.$bus.$off('cart-change', this.updateCartCount);
  },
  methods: {
    updateCartCount(){
      this.cartCount = getCartItemCount();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getUserInfo(){
      const u = localStorage.getItem("user");
      if(u){
        this.user = JSON.parse(u);
      }else {
        this.user = null
      }
    },
    logOut(){
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      // 触发事件总线，通知头部刷新
      this.$bus.$emit('user-change');
      this.$message.success("退出成功");
      this.$router.push("/login");
    },
    onMyOrders(){
      if(this.$route.path.toString().startsWith("/order")){
        return
      }
      this.$router.push("/order");
    }
  },
  computed: {
    activeIndex() {
      // 根据当前路由路径返回对应的 index
      const routeMap = {
        '/product': '1',
        '/publish': '3',
        '/profile': '4',
        '/order' : '2',
        '/cart' : '5'
      };
      return routeMap[this.$route.path] || '1';
    },
    isLogin(){
      // console.log(this.user);
      return !!this.user && !!this.user.id;
    }
  }
}
</script>

<template>
  <div v-if="isLogin" class="NAV">
  <!-- Logo展示项 - 不作为菜单项 -->
    <div style="display: flex;flex-wrap: wrap">
      <div class="logo-container hover-underline" @click="()=>{if(this.$route.path !== '/product')$router.push('/');else this.$router.go(0)}">
        <div style="display: flex; align-items: center; gap: 1rem; padding: 0 20px;">
          <img :src="require('@/assets/Logo/icons8-购物车-64.png')" style="width: 32px; height: 32px;" alt="Logo">
          <h1 style="margin: 0; font-size: 1.2rem;">校园市场</h1>
        </div>
      </div>
      <div class="head-nav">
        <el-menu :default-active="activeIndex"  class="el-menu-nav" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">
            <router-link to="/product" class="full-link">商品列表</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/publish" class="full-link">发布商品</router-link>
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/message" class="full-link">消息</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/myHome" class="full-link">个人中心</router-link>
          </el-menu-item>
          <el-menu-item index="6">
            <router-link to="/test" class="full-link">testPage</router-link>
          </el-menu-item>
          <el-menu-item index="5">
            <router-link to="/cart" class="full-link">
              <i class="el-icon-shopping-cart-1"></i>购物车
              <el-badge
                v-if="cartCount"
                :value="cartCount"
                class="cart-badge">
              </el-badge>
            </router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="avatar-container">
      <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :src="user.avatar">
              </el-avatar>
              <span style="font-size: 1rem; color: black">{{ user.username }}</span>
            </span>
        <el-dropdown-menu>
          <el-dropdown-item>我的信息</el-dropdown-item>
          <el-dropdown-item @click.native="onMyOrders">我的订单</el-dropdown-item>
          <el-dropdown-item @click.native="logOut" style="color: #ff5151" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="less">
.cart-badge{
  //padding-bottom: 10px;
  //margin-right: 30px;
}
.avatar-container{
  background-color: white;
  margin-right: 2rem;
}
.el-dropdown-link{
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* 使Logo容器与菜单项对齐 */
.logo-container {
  display: inline-flex;
  height: 60px; /* 与菜单项高度一致 */
  align-items: center;
  float: left;
}
/* 关键修复点2：容器设定 */
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 改用vh确保可视区域高度 */
  width: 100%;
}
/* 修复链接点击区域 */
.full-link {
  display: block;
  width: 100%;
  height: 99%;
  text-decoration: none;
  color: inherit;
}
/* 关键修复点3：菜单固定 */
.nav-menu {
  flex: 0 0 60px !important; /* 强制覆盖Element默认样式 */
  width: 100%;
}

/* 关键修复点4：内容区弹性布局 */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px; /* 建议保留适当内边距 */
}
.bg{
  height: auto;
}

.el-menu-nav{
  width: 100%;
  flex: 0 0 60px;
}

.NAV{
  height: 61px;
  min-width: 500px;
  display: flex;
  background-color: white;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  //padding-bottom: 10px;
  //box-shadow: #409EFF;
  //box-shadow: 0 4px 24px rgba(64,158,255,0.4);
  //border-bottom: 2px solid gray;
}
</style>